<template>
    <div class="pay">
        <header>
            <webHader :title="t('coursePay.title')" :crumbs="crumbs" :backgroundImageUrl="headerBg" />
        </header>
        <section class="content">
            <div class="icon">
                <img src="~/assets/web/pay-success.png" alt="" />
                <h2>{{ t('coursePay.paySuccess') }}</h2>
            </div>
            <div class="order-description">
                <p>
                    {{ t('coursePay.paymentMethod') }}：{{ payMethodLabel }}
                </p>
                <p>
                    {{ t('coursePay.paymentTime') }}：{{ paidAtDisplay }}
                </p>
                <p v-if="resolvedOrderNo">
                    {{ t('coursePay.orderNo') }}：{{ resolvedOrderNo }}
                </p>
            </div>

            <div class="btns">
                <button :class="{ active: activeButton === 'appointment' }" @click="setActiveButton('appointment')">
                    {{ t('coursePay.goAppointment') }}
                </button>
                <button :class="{ active: activeButton === 'back' }" @click="setActiveButton('back')">
                    {{ t('coursePay.goBack') }}
                </button>
                <button :class="{ active: activeButton === 'order' }" @click="setActiveButton('order')">
                    {{ t('coursePay.viewOrder') }}
                </button>
            </div>
        </section>
    </div>
</template>

<script setup>
import headerBg from '~/assets/web/activity-header-bg.png';

const { t } = useI18n();
const route = useRoute();
const { $navigate } = useNuxtApp();

const props = defineProps({
    paymentMethod: {
        type: String,
        default: '',
    },
    orderNo: {
        type: String,
        default: '',
    },
    paidAt: {
        type: String,
        default: '',
    },
});

const crumbs = computed(() => t('coursePay.crumbs'));
const activeButton = ref('appointment');

const normalizeQueryValue = val => {
    if (Array.isArray(val)) return val[0] || '';
    return val || '';
};

const resolvedPaymentMethod = computed(
    () => props.paymentMethod || normalizeQueryValue(route.query.paymentMethod)
);
const resolvedOrderNo = computed(() => props.orderNo || normalizeQueryValue(route.query.orderNo));
const resolvedPaidAt = computed(() => props.paidAt || normalizeQueryValue(route.query.paidAt));

const payMethodLabel = computed(() => {
    const method = resolvedPaymentMethod.value;
    if (!method) return t('coursePay.placeholder');

    const normalized = String(method).toLowerCase();
    const methodMap = {
        offline: t('coursePay.methodOffline'),
        online: t('coursePay.methodOnline'),
        wechat: t('coursePay.methodWechat'),
        alipay: t('coursePay.methodAlipay'),
    };
    return methodMap[normalized] || method;
});

const formatDateTime = value => {
    if (!value) return '';
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return value;
    const pad = num => `${num}`.padStart(2, '0');
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(
        date.getHours()
    )}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
};

const paidAtDisplay = computed(() => {
    const formatted = formatDateTime(resolvedPaidAt.value);
    return formatted || t('coursePay.placeholder');
});

const setActiveButton = buttonType => {
    if (buttonType === 'appointment') {
        $navigate('/admin/courseSystem/courseOfMy')
    } else if (buttonType === 'back') {
        $navigate('/web/courses');
    } else if (buttonType === 'order') {
        $navigate('/admin/order/courseOrder');
    }
};
</script>


<style lang="less" scoped>
.pay {
    width: 100%;

    margin-bottom: 70px;

    .content {
        width: 100%;
        padding: 70px 125px 40px 125px;
        box-sizing: border-box;

        .icon {
            width: 100%;
            text-align: center;
            margin-bottom: 24px;

            img {
                width: 100px;
            }

            h2 {
                font-family: PingFang HK, PingFang HK;
                font-weight: 500;
                font-size: 24px;
                color: #1E2021;
                margin-top: 30px;
            }
        }

        .order-description {
            width: 100%;
            text-align: center;

            p {
                width: 100%;
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 18px;
                color: #656C7E;
                line-height: 30px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }

        .btns {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40px;

            button {
                width: 162px;
                height: 56px;
                border: 1px solid #1E2021;
                border-radius: 0px 0px 0px 0px;
                margin: 0 10px;
                font-family: PingFang HK, PingFang HK;
                font-weight: 500;
                font-size: 16px;
                color: #1E2021;
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover {
                    border: none;
                    color: #ffffff;
                    background: var(--theme-gradient-bg);
                }
            }

            .active {
                border: none;
                color: #ffffff;
                background: var(--theme-gradient-bg);
            }
        }
    }
}
</style>
